<template>
  <scroller height="89vh">
    <div class="nav-box">
      <div class="nav-title">
        <span class="title-text">
          <ri i="user"></ri>
          诗人
        </span>
        <span class="nav-toolbar">
        </span>
      </div>
      <div class="nav-body">
        <hot-authors tags="poets"></hot-authors>
      </div>
    </div>
    <div class="nav-box">
      <div class="nav-title">
        <span class="title-text">
          <ri i="genre"></ri>
          诗体
        </span>
      </div>
      <div class="nav-body">
        <nav-tags :tags="genreTags"></nav-tags>
      </div>
    </div>
    <div class="nav-box">
      <div class="nav-title">
        <span class="title-text">
          <ri i="era"></ri>
          朝代
        </span>
      </div>
      <div class="nav-body">
        <nav-tags :tags="eraTags"></nav-tags>
      </div>
    </div>
    <div class="nav-box">
      <div class="nav-title">
        <span class="title-text">
          <ri i="style"></ri>
          风格/主题
        </span>
      </div>
      <div class="nav-body">
        <nav-tags :tags="styleTags"></nav-tags>
      </div>
    </div>
    <div class="nav-box">
      <div class="nav-title">
        <span class="title-text">
          <ri i="style"></ri>
          词曲牌
        </span>
      </div>
      <div class="nav-body">
        <nav-tags :tags="tuneTags"></nav-tags>
      </div>
    </div>
    <div class="nav-box">
      <div class="nav-title">
        <span class="title-text">
          <ri i="style"></ri>
          韵脚
        </span>
      </div>
      <div class="nav-body">
        <nav-tags :tags="rhymeTags"></nav-tags>
      </div>
    </div>
  </scroller>
</template>

<script>
import Scroller from "@/tools/Scroller.vue"
import HotAuthors from "./HotAuthors.vue"
import NavTags from "./NavTags.vue"
import { MatKind, TagCat } from "@/js/constants.js"

export default {
  components: {
    Scroller,
    HotAuthors,
    NavTags,
  },
  data() {
    return {
      tags: [],
      bili: {},
    };
  },
  computed: {
    eraTags() {
      return this.tags.filter((t) => t.cat == TagCat.Era);
    },
    genreTags() {
      return this.tags.filter((t) => t.cat == TagCat.Genre);
    },
    styleTags() {
      return this.tags.filter((t) => t.cat == TagCat.Style);
    },
    tuneTags() {
      return this.tags.filter((t) => t.cat == TagCat.Tune);
    },
    rhymeTags() {
      return this.tags.filter((t) => t.cat == TagCat.Rhyme);
    }
  },
  created() {
    // 获取标签集合
    this.$axios
      .get("/api/v1/tags/list?kind=" + MatKind.Poem)
      .then((res) => {
        this.tags = res.data;
      });
  },
  methods: {},
};
</script>

<style lang="stylus">
.nav-box
  margin-bottom 1vh
  text-align left

  .nav-title
    border-bottom 1px solid #eee
    padding 0.6vh 0

    .title-text
      font-weight bold

      .icon-button
        color #888

    .nav-toolbar
      float right

      svg
        margin-left 5px
        color #999
        cursor pointer

        &:hover
          color #409EFF

  .nav-body
    padding 10px
    font-size 0.9em

    a
      color #666
      cursor pointer
      text-decoration none
      margin-right 10px

      &:hover
        color #409EFF

    .tag-wrap
      margin-right 0.4vw
      margin-bottom 0.6vh
</style>